<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="maqettadocs.css" />
<title>Tutorial 7 - Page Editor Basics (2)</title>
</head>
<body class="maqettadocs">

<style type="text/css">
table.CompTypeTable {
	border-spacing: 0;
	border-collapse: collapse;
}
table.CompTypeTable td, table.CompTypeTable th {
	padding:3px;
	border:1px solid black;
}
table.CompTypeTable th {
	font-style:italic;
	font-weight:bold;
	background:#888;
}
table td.CompTypeOption {
	font-weight:bold;
}
tr.desktop {
	background-color:#ddf;
}
tr.mobile {
	background-color:#dfd;
}
</style>

<div id="pagebody">

<table class="breadcrumbs noprint"><tr>
	<td> &nbsp; </td>
    <td class="prevnext">
	<a href="tutorials/Page_Editor_Basics_1.html">Previous</a> / <a href="tutorials/Sketching.html">Next</a>
    </td></tr>
</table>

<h1>Tutorial 7 - Page Editor Basics (2)</h1>

<div class='note'>
	When going through Maqetta's tutorials, it is suggested that you have two side-by-side
	browser windows open, one showing the tutorial, and the other where you run the application
	and perform the steps listed in the tutorial.<br/>
	<img src='img/SideBySideTutorialsApp.png' class='side_by_side'/>
</div>

<p>This tutorial covers the following topics:</p>
<ul>
	<li>Container widgets vs primitive widgets (i.e., "controls")</li>
	<li>Choose parent preference</li>
	<li>Inline vs block widgets</li>
	<li>Flow vs absolute layout</li>
</ul>

<a name="container_vs_primitive"><h2>Container widgets vs primitive widgets (i.e., "controls")</h2></a>

<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Issue a <b>Create Desktop Application...</b> command.
</li> 
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the <b>Palette</b>, click on the <b>Containers</b> section to open that section, then
	click on the the subsection labelled <b>Dojo</b>.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag a <b>TabContainer</b> widget onto the canvas.
	When the data entry popup appears, click OK or click away to accept the default values.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the <b>Palette</b>, click on the <b>Controls</b> section to open that section, then
	click on the the subsection labelled <b>TextBox</b>.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag a <b>TextBox</b> widget onto the canvas, dropping the Button
	inside of the TabContainer.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the <b>Palette</b>, click on the <b>Controls</b> section to open that section (if not already open), then
	click on the the subsection labelled <b>Buttons</b>.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag a <b>Button</b> widget onto the canvas, dropping the Button
	inside of the TabContainer.
	When the data entry popup appears, click OK or click away to accept the default values.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Go to the far-left of the Maqetta window and click on the large <strong>Outline</strong>
	palette button to expose the Outline palette, which shows your document's widget hierarchy.</li>
<div class='note'>Note that the Outline shows that the TextBox and Button widgets are nested inside the TabContainer.
	In fact, the hierarchy is TabContainer, with two ContentPane children (one for each tab in the TabContainer),
	and then the TextBox and Button widgets are children of the first ContentPane.
	<br/><br/>
	By default, Maqetta adds new widgets as children of the container widget
	at the widget drop location.
</div>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Go to the far-left of the Maqetta window and click on the large <strong>Palette</strong>
	palette button to expose the Palette palette to show the widget palette once again.</li>
</ol>

<a name="container_vs_primitive"><h2>Choose parent preference</h2></a>

<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the main menubar, at the top/right of the application, click on the application settings icon
	<img src='img/Application_settings_icon.png' class='exact_size_inline_icon'/>
	and then choose "Preferences" to bring up the Preferences dialog.</li>
<div class="image">
<a href="img/Preferences_html_visual_editor.png" target="_blank"><img alt="image" src="img/Preferences_html_visual_editor.png" style="margin: 1em 1em 0pt 0pt; height:225px; width:auto;" /></a>
</div>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Turn option "When dragging, show possible parents:" on by clicking on the checkmark for that item,
	then click <b>Save</b> to update your preferences.</li>
<div class='note'>Note that preference changes stay active forever, even across sessions,
	until you change them again.</div>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the <b>Palette</b>, click on the <b>Controls</b> section to open that section (if not already open), then
	click on the the subsection labelled <b>Buttons</b>.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Observe the screen while you perform the following operation.
	Drag a <b>ComboButton</b> widget onto the canvas and hover over the TabContainer, 
	but don't let up on the mouse yet.
	Instead, notice that Maqetta shows an annotation next to the mouse that shows
	the list of possible parent widgets for the ComboButton. While still holding the mouse,
	your screen should look something like this:</li>
<div class="image">
<a href="img/Choose_parent.png" target="_blank"><img alt="image" src="img/Choose_parent.png" style="margin: 1em 1em 0pt 0pt; height:250px; width:auto;" /></a>
</div>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Let up on the mouse over the TabContainer so that the ComboBox is dropped into the TabContainer,
	and will become a child of the ContentPane (just like what happened previously with the TextBox and Button).</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag a second <b>ComboButton</b> widget onto the canvas and hover over the white area
	under the TabContainer. Notice that the only candidate parent will by the &lt;body&gt;.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	While still dragging the ComboButton, move the mouse once again over the TabContainer.
	The list of candidate parents will once again show two candidate parents: the ContentPane and the &lt;body&gt;.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	While still dragging and hovering over the ContentPane, on your keyboard, press the number "2" key.
	Notice that list of candidate parents now has the arrow pointing to the &lt;body&gt;.
	At this point, let up on the mouse to complete the drop operation.
	The new ComboBox should be added <em>under</em> the TabContainer because you told Maqetta
	to choose &lt;body&gt; as the parent, instead of the ContentPane, and as a result,
	the ComboBox has become a sibling to the TabContainer. (Note: you can look at the Outline palette
	to verify that the ComboBox is indeed a sibling to the TabContainer.)</li>
<div class='note'>The choose parent user interface shows both at widget creation time (when dragging/dropping
	from the Palette onto the canvas), and when dragging existing widgets around on the canvas.</div>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the file tab's close button -
	<img src='img/close_sel.gif' class='exact_size_inline_icon'/>
	- to close the page editor. (Click Discard on the Save/Discard/Cancel alert that appears.)</li>
</ol>

<a name="inline_vs_block"><h2>Inline vs block widgets</h2></a>

<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Issue a <b>Create Desktop Application...</b> command. In the Create Desktop Application dialog,
	click the <b>Create</b> button to create a new file with the default filename.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag the following widgets onto the canvas:
	TextBox, Button, ComboButton, HTML &lt;label&gt;,
	Calendar, HTML &lt;div&gt;.</li>
<div class='note'>
	Note that some widgets are added to the right of the previous widget and other widgets are added under the previous widget.
	This is because some widgets default as "block-level" widgets, which means they, in effect, also establish their own
	separate block (or "paragraph"), whereas other widgets are designed as "inline" widgets, which means they are placed inline
	within the current block (or "paragraph") and behave from a layout perspective similar to typed text or small inline images.
	Maqetta simply honors the default layout behavior for each widget.
</div>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the file tab's close button -
	<img src='img/close_sel.gif' class='exact_size_inline_icon'/>
	- to close the page editor. (Click Discard on the Save/Discard/Cancel alert that appears.)</li>
</ol>

<a name="container_vs_primitive"><h2>Flow vs absolute layout</h2></a>

<p>HTML5 uses CSS for layout and styling. CSS offers two primary layout mechanisms:</p>
<ul>
	<li><b>Flow layout</b> - This is the layout you find in text document editors such as
		MS Word or Google Docs, where page elements flow left-to-right and then
		top-to-bottom.</li>
	<li><b>Absolute layout</b> - This is the layout you find in drawing programs
		where page elements are positioned at fixed (x,y) locations on the page.</li>
</ul>

<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Issue a <b>Create Desktop Application...</b> command.
</li> 
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Look at the page editor toolbar for a drop-down button that says either "Flow"
	or "Absolute". (Note: it probably says "Flow".) This indicates that the page editor
	will add new widgets using flow layout.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Change the Flow/Absolute button to "Absolute".</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag/drop a Calendar widget onto the canvas.</li>
<p>Notice that the Calendar widget is positioned absolutely at the position where
	you dropped the Calendar.</p>
<div class='note'>
	The flow-vs-absolute setting is document-specific and persists throughout the
	lifetime of the document, until you change the value.
</div>
<p>Click on the Undo icon to remove the Calendar you just added.</p>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Change the Flow/Absolute button back to "Flow".</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Once again, drag/drop a Calendar widget onto the canvas.</li>
<p>Notice that the Calendar widget is positioned using flow layout, and ends up at the top/left of the canvas.</p>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the file tab's close button -
	<img src='img/close_sel.gif' class='exact_size_inline_icon'/>
	- to close the page editor. (Click Discard on the Save/Discard/Cancel alert that appears.)</li>
</ol>

<br />
<p class="prevnext"><a href="tutorials/Page_Editor_Basics_1.html">Previous</a> / <a href="tutorials/Sketching.html">Next</a></p>

</div> <!-- pagebody -->

</body>
</html>
